<template>
  <div class="myDialog">
    <el-dialog
      :custom-class="customName"
      :title="$slots.title ? '' : title"
      :append-to-body="false"
      :width="dialogWidth"
      :visible.sync="visible"
      :before-close="handleClose"
      :destroy-on-close="destroyOnClose"
      @open="open"
      @opened="opened"
      @close="close"
      @closed="closed"
      :modal="modal"
      :close-on-click-modal="false"
      :fullscreen="fullscreen"
    >
      <template v-if="$slots.title">
        <span slot="title">
          <slot name="title" />
        </span>
      </template>
      <slot name="body"></slot>
      <span slot="footer" class="dialog-footer">
        <slot name="footer" />
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "MyDialog",
  props: {
    show: {
      type: Boolean,
      default: false
    },
    customName: {
      type: String,
      default: ""
    },
    title: {
      type: String,
      default: "提示"
    },
    modal: {
      // 是否需要遮罩层
      type: Boolean,
      default: true
    },
    fullscreen: {
      // 是否全屏
      type: Boolean,
      default: false
    },
    destroyOnClose: {
      // 关闭时销毁 Dialog 中的元素
      type: Boolean,
      default: true
    },
    dialogWidth: {
      type: String,
      default: "30%"
    }
  },
  computed: {
    visible: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val); // visible 改变的时候通知父组件
      }
    }
  },
  methods: {
    handleClose(done) {
      // 关闭前回调
      this.$emit("beforeClose");
      done();
    },
    open() {
      // Dialog 打开的回调
      this.$emit("open");
    },
    opened() {
      // Dialog 打开动画结束时的回调
      this.$emit("opened");
    },
    close() {
      // Dialog 关闭的回调
      this.$emit("close");
    },
    closed() {
      // Dialog 关闭动画结束时的回调
      this.$emit("closed");
    }
  }
};
</script>

<style lang='scss' scoped>
// .box-bg {
//   background: #f9f9f9;
// }

::v-deep .el-dialog__header {
  // display: flex;
  // justify-content: center;
  // align-items: center;
  // font-weight: 700;
  // border-bottom: 1px solid #dddde7;
  // // padding: 20px;
  // .el-dialog__headerbtn {
  //   margin-top: 3px;
  // }
}



// .box-darkBlue {
//   background: #ffffff;
//   .el-dialog__header {
//     background: rgba(37, 110, 241, 0.1);
//     padding: 10px 20px 10px;
//   }
// }
// .nopadding {
//   .el-dialog__header {
//     border-bottom: 1px solid #dddde7;
//     span {
//       text-align: center;
//       font-size: 15px;
//       font-family: PingFang SC;
//       font-weight: bold;
//       color: #2a2a2a;
//     }
//   }
//   .el-dialog__body {
//     padding: 10px 20px;
//   }
// }
</style>